.serviceList{
    display: flex;
    flex-wrap: wrap;
    .cardBox{     
        min-width: 300px;   
        width: calc(25% - 15px);
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .statusCircel{
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 10px;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .statusProcessing{
        position: relative;
        color: #1677ff;
        background-color: #1677ff;
        &:after{
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: 100%;
            height: 100%;
            border-width: 1px;
            border-style: solid;
            border-color: inherit;
            border-radius: 50%;
            animation-name: antStatusProcessing;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            content: "";
        }
    }
    .alertWrap{
        position: absolute;
        top: 4px;
        right: 8px;
        color: var(--cloudeon-red-color);
        // font-size: 18px;
    }
}

.alertText{
    color: var(--cloudeon-red-color) !important;
}

@-webkit-keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .9
    }
 
    to {
        -webkit-transform: scale(2.4);
        transform: scale(2.4);
        opacity: 0
    }
}
 
@keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .9
    }
 
    to {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0
    }
}